<script setup>
import { reactive, ref, watch } from 'vue'

const count = ref(0)
const user = reactive({
  name: '老韩',
  info: {
    age: 18,
    hobby: '女'
  }
})
// 监听count的变化
// 监听一个数据变化
// watch(count, () => {
//   // 当监听的数据发生变化时,回调函数会调用
//   console.log('count发生变化了');
// })
// 写个定时器改一下count数据
// setTimeout(() => {
//   count.value++
// }, 3000)

// 监听多个数据变化  watch([数据1, 数据2...], 数据变化之后的回调函数)
// watch([count, user], () => {
//   console.log('数据变化了');
// })
// setTimeout(() => {
//   count.value++
// }, 2000)
// setTimeout(() => {
//   user.info.age++
// }, 4000)

// 监听对象里的某一个属性的变化(简单类型) 注意: 对象里的属性需要写成箭头函数返回数据的形式
// watch(() => user.name, () => {
//   console.log('数据变化了');
// })
// setTimeout(() => {
//   user.name = '张三'
// }, 2000)
// setTimeout(() => {
//   user.info.age++
// }, 4000)
// 监听对象里的某一个属性的变化(复杂类型)
watch(() => user.info, () => {
  console.log('数据变化了');
}, {
  // 开启深度监听
  deep: true,
  immediate: true
})
setTimeout(() => {
  user.info.age++
}, 2000)
</script>

<template>
  <div>
    {{ count }}
  </div>
  <div>
    姓名: {{ user.name }}
    年龄: {{ user.info.age }}
    爱好: {{ user.info.hobby }}
  </div>
</template>

<style scoped></style>
